<template>
    <div>
        <el-card>
            <el-row>
                <el-col>
                    <el-button type="primary" @click="addNotice">发布公告</el-button>
                </el-col>
            </el-row>
           <el-table :data="noticeList" border stripe>
               <el-table-column align="center" label="序号" type="index"></el-table-column>
               <el-table-column align="center" label="标题" width="200" prop="title"></el-table-column>
               <el-table-column align="center" label="内容" prop="content"></el-table-column>
               <el-table-column align="center" label="创建时间" width="200" prop="createTime">
                   <template v-slot="scope">
                       {{scope.row.createTime | dateFormat}}
                   </template>
               </el-table-column>
               <el-table-column align="center" label="状态" width="100" type="status">
                   <template v-slot="scope">
                       <el-switch v-model="scope.row.status" @change="noticeStatusChanged(scope.row)"></el-switch>
                   </template>
               </el-table-column>
               <el-table-column align="center" label="操作" width="200">
                    <template v-slot="scope">
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeById(scope.row.id)">删除</el-button>
                    </template>
               </el-table-column>
           </el-table>
            <!--分页区-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pageNum"
                    :page-sizes="[3, 6, 9, 12]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>

        <add-notice ref="dialog"></add-notice>
    </div>
</template>

<script>
    import {notice_changeStatus, notice_delete, notice_request} from "../../network/notice";
    import AddNotice from "./AddNotice";

    export default {
        name: "Notice",
        components: {AddNotice},
        data(){
            return{
                queryInfo:{
                    query:'',
                    pageNum: 1,
                    pageSize: 3
                },
                noticeList:[],
                total:0
            }
        },
        created() {
            this.getNoticeList()
        },
        methods:{
            getNoticeList(){
                notice_request(this.queryInfo.query,this.queryInfo.pageNum,this.queryInfo.pageSize).then(
                    res=>{
                        this.noticeList=res.notices.records.map(item=>{
                            return{
                                id:item.id,
                                title:item.title,
                                content:item.content,
                                status: item.status===1?true:false,
                                createTime:item.createTime
                            }
                        })
                        this.total=res.notices.total
                        console.log(res);
                    }
                )
            },
            noticeStatusChanged(noticeInfo){
                notice_changeStatus(noticeInfo.id).then(res=>{
                    if (res.code==200){
                        this.$message.success('更新公告状态成功')
                    }else {
                        noticeInfo.status=! noticeInfo.status
                        this.$message.error('更新公告状态失败')
                    }
                })
            },
            handleSizeChange(newSize){
                this.queryInfo.pageSize=newSize
                this.getNoticeList()
            },
            handleCurrentChange(newPage){
                this.queryInfo.pageNum=newPage
                this.getNoticeList()
            },
            removeById(id){
                this.$confirm('此操作将永久删除该公告, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    notice_delete(id).then(res=>{
                        if (res.msg==='success'){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                           this.getNoticeList()
                        }
                        else{
                            this.$message.error("删除失败，有商品使用该分类！")
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            addNotice(){
                this.$refs.dialog.visible()
            }
        }
    }
</script>

<style scoped>

</style>